<template>
    <div class="tenantSearchContainer">
        <span class="inputLabel">租户编码</span>
        <el-input v-model="tenantSearchData.tenantId" placeholder="租户编码" class="searchInfoInput"></el-input>

        <el-input
            v-model="tenantName"
            placeholder="租户名称"
            class="searchInfoInput"
        >
            <template #prepend>
                <el-select v-model="tenantNameType" style="width: 90px">
                    <el-option label="中文" value="1" />
                    <el-option label="英文" value="2" />
                </el-select>
            </template>
        </el-input>

        <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryUserInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script name="TenantSearch" setup lang="ts">
import {tenantInfoQuery} from "@/request/tenant";
import {computed, ref} from "vue";
import {useTenantInfoStore} from "@/stores/userInfo/tenantInfo";

let tenantName = ref("");
let tenantNameType = ref("1");
let searchLoading = ref(false);

let tenantSearchData = computed(() => {return useTenantInfoStore().tenantSearchData});

function queryUserInfo() {
    searchLoading.value = true
    if (tenantNameType.value === '1') {
        tenantSearchData.value["tenantNameCn"] = tenantName.value;
        tenantSearchData.value["tenantName"] = '';
    } else if (tenantNameType.value === '2') {
        tenantSearchData.value["tenantName"] = tenantName.value;
        tenantSearchData.value["tenantNameCn"] = '';
    }
    tenantInfoQuery(tenantSearchData.value).then(res => {
        if (res["code"] === '200') {
            useTenantInfoStore().resetTenantDataList(res.data);
        }
        searchLoading.value = false
    }).catch(res => {
        searchLoading.value = false
    })
}

function resetInput() {
    useTenantInfoStore().resetTenantSearchData({
        tenantId: '',
        tenantName: '',
        tenantNameCn: '',
        tenantNameType: ''
    });
    tenantName.value = ''
    tenantNameType.value = '1'
}
</script>

<style scoped lang="less">
.tenantSearchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}
</style>